<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', '') - {{ config('app.name') }}</title>

    <!-- CSS -->
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
    @stack('styles')
</head>
<body>
    <div class="screen">
        <div class="app-container">
            @yield('content')
        </div>
    </div>

    @yield('modal-content')

    <!-- 普通提示模态框 -->
    <div class="modal fade" id="alertModal" tabindex="-1" style="display: none">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="alertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="alertModalBody">
                    <!-- 动态内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 带跳转按钮的模态框 -->
    <div class="modal fade" id="redirectModal" tabindex="-1" style="display: none">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="redirectModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="redirectModalBody">
                    <!-- 动态内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <a href="#" class="btn btn-primary" id="redirectBtn">立即跳转</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast 容器 -->
    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 9999;">
        <!-- Toast 消息将动态插入这里 -->
    </div>

    <!-- JavaScript -->
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>

    <!-- 公共JavaScript函数 -->
    <script>
        // Toast 提示框函数
        // 显示提示消息
        function showToast(message, type = 'info', duration = 3000) {
            // 创建提示元素
            const toast = $(`
            <div class="toast-message" style="
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: ${type === 'error' ? '#fed7d7' : '#c6f6d5'};
                color: ${type === 'error' ? '#c53030' : '#2f855a'};
                padding: 15px 20px;
                border-radius: 10px;
                font-weight: 600;
                z-index: 9999;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            ">${message}</div>
        `);

            $('body').append(toast);

            // 3秒后自动消失
            setTimeout(() => {
                toast.fadeOut(300, function() {
                    $(this).remove();
                });
            }, duration);
        }

        // 兼容原有的alert函数，但使用toast实现
        function alert(message) {
            showToast(message, 'info');
        }

        // Bootstrap 模态框函数（保留用于需要用户确认的场景）
        function showAlert(message, type = 'info') {
            document.getElementById('alertModalBody').textContent = message;
            const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
            alertModal.show();
        }

        /**
         * 统一消息处理函数
         * @param {string} message - 消息内容
         * @param {object} options - 配置选项或服务器响应对象
         * @param {string} options.type - 消息类型：'info', 'success', 'error', 'warning'
         * @param {number} options.duration - Toast显示时长（毫秒）
         * @param {string} options.redirect_to - 跳转链接，如果提供则显示带跳转按钮的模态框
         * @param {string} options.redirectBtnText - 跳转按钮文本，默认为"立即前往"
         * @param {string} options.modalTitle - 模态框标题，默认为"提示"
         *
         * 注意：可以直接传入服务器响应对象作为options，函数会自动提取其中的参数
         */
        function showMessage(message, options = {}) {
            // 设置默认选项
            const defaultOptions = {
                type: 'info',
                duration: 3000,
                redirect_to: null,
                redirectBtnText: '立即前往',
                modalTitle: '提示'
            };

            // 合并选项
            const settings = {...defaultOptions, ...options};

            // 如果有跳转链接，显示带跳转按钮的模态框
            if (settings.redirect_to) {
                // 设置模态框内容
                document.getElementById('redirectModalLabel').textContent = settings.modalTitle;
                document.getElementById('redirectModalBody').textContent = message;
                document.getElementById('redirectBtn').textContent = settings.redirectBtnText;
                document.getElementById('redirectBtn').href = settings.redirect_to;

                // 显示模态框
                const redirectModal = new bootstrap.Modal(document.getElementById('redirectModal'));
                redirectModal.show();
            } else {
                // 否则使用Toast显示
                showToast(message, settings.type, settings.duration);
            }
        }

        // 显示成功消息
        function showSuccess(message, options = {}) {
            options.type = 'success';
            showMessage(message, options);
        }

        // 显示错误消息
        function showError(message, options = {}) {
            options.type = 'error';
            showMessage(message, options);
        }

        // 显示警告消息
        function showWarning(message, options = {}) {
            options.type = 'warning';
            showMessage(message, options);
        }

        // 显示信息消息
        function showInfo(message, options = {}) {
            options.type = 'info';
            showMessage(message, options);
        }

        // CSRF Token设置
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

    <!-- 检查session闪存消息并显示弹窗 -->
    @if(session()->has('success_msg'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showToast("{{ session()->pull('success_msg') }}");
            });
        </script>
    @endif

    @if(session()->has('error_msg'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showToast("{{ session()->pull('error_msg') }}", 'error');
            });
        </script>
    @endif

    @stack('base_scripts')
    @stack('scripts')

</body>
</html>
